<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=5zQ9nwYR2PShtg3XHWEFDp9yGAy1E6vb"></script>
    <!-- 引入 ECharts -->
    <script src="./dist/echarts.min.js"></script>
    <!-- 引入百度地图扩展 -->
    <script src="./dist/extension/bmap.min.js"></script>
</head>
<body>
    <div id="echart" style="width:1400px;height:800px"></div>
</body>
<script>
    var myChart = echarts.init(document.getElementById('echart'))
    option = {
        // 加载 bmap 组件
        bmap: {
            // 百度地图中心经纬度
            center: [120.13066322374, 30.240018034923],
            // 百度地图缩放
            zoom: 14,
            // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
            roam: true,
            // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
            mapStyle: {}
        },
        series: [{
            type: 'scatter',
            // 使用百度地图坐标系
            coordinateSystem: 'bmap',
            // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
            data: [ [120, 30, 100] ]
        }]
    }

    // 获取百度地图实例，使用百度地图自带的控件
    // var bmap = myChart.getModel().getComponent('bmap').getBMap();
    // bmap.addControl(new BMap.MapTypeControl());
    myChart.setOption(option)
</script>
</html>